<template>
  <div class="search">
    <div class="search-history">
      <van-icon name="clock-o" size="14" />
      <h2>搜索历史</h2>
      <div @click="deleteSearch" class="delete-search">
        <van-icon name="delete-o"  size="15"/>
      </div>
    </div>
    <ul class="history-item">
      <li v-for='(item,index) in searchArr' :key='index'   @click="goDetail(item.docid)">{{item}}</li>
    </ul>
    <div class="search-info" >
      <van-icon name="fire-o" color="#ef4645" size="14"/>
      <span>热点新闻</span>
      <ul>
        <li v-for="item in list" :key="item.docid"  @click="goDetail(item.docid)">
          <span>{{item.num}}</span>
          <span>{{item.title}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  props:{
    list:{
      type:Array
    }
  },
  data() {
    return {
      searchArr: [],
    };
  },
  created() {
    this.searchArr = JSON.parse(localStorage.getItem("searchList"));
  },
  methods: {
    deleteSearch() {
      Dialog.confirm({
        title: "",
        message: "是否删除全部搜索历史记录?",
        showCancelButton: true,
      }).then(() => {
        localStorage.removeItem("searchList");
        this.searchArr = [];
      });
    },
    goDetail(id){
      this.$router.push({
        path:'/news-detail',
        query:{
          id
        }
      })
    }
  },
};
</script>

<style scoped lang="less">
.search{
  padding:20px 10px;
}
.search-history {
  display: flex;
  margin-bottom: 20px;
  line-height: 15px;
  h2 {
    font-size: 14px;
    margin:0 0 10px 5px;
    flex: 1;
  }
  .delete-search {
    font-size: 14px;
    margin-right: 20px;
  }
}

.history-item {
  display: flex;
  flex-wrap: wrap;
  margin: 0 10px;
  li {
    margin: 0 12px 14px 0;
    height: 30px;
    padding: 0 13px;
    line-height: 31px;
    font-size: 12px;
    color: #333;
    border-radius: 16px;
    background-color: #f5f7f9;
  }
}
.search-info {
 span{
    font-size: 14px;
    margin-left: 5px;
 }
 ul{
   font-size:14px;
   line-height: 40px;
   margin:0 20px;
 }

}
</style>
